<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow
      :right-text="rightText"
      @click-left="$utils.back($route.path)"
      @click-right="onClickRight"
    />
    <div class="has-top has-bottom" style="height:100vh">
      <div class="flex full-height">
        <div class="flex-s-0 scoll-y">
          <ul>           
            <li
              v-for="(item, index) in classifyList"
              :key="index"
              class="tac fs-26 ptb-36 plr-20 classifyItem"
              :class="index === activeIndex ? 'activeIndex' : ''"
              @click="changeClassify(index)"
            >
              {{ item.Name }}
            </li>
            <li class="flex-center fs-26 ptb-36 plr-20 color-black classifyItem " @click="showClassifyList=true">
              <svg-icon icon-class="edit" class="mr-10" />
              <p>编辑</p>
            </li>
          </ul>
        </div>
        <div id="scrollBox" class=" bg-f9 flex-1 scoll-y">
          <p class="mg-22">{{ category }}({{ productList.length }})</p>
			
          <tableList :product-list="productList"  :sortable="sortable" @editDetail="editDetail" />
          <noData v-show="productList.length===0" />
        </div>
      </div>
    </div>
    <div class="fixed-bottom flex-center bottom-box">
      <button class="btn-large color-white bg-primary" @click="showClassifyList=true">添加{{ zhuotxt }}</button>
      <!--<button class="btn-large color-white bg-primary" @click="addProduct">添加{{ zhuotxt }}</button>-->
    </div>

    <van-popup v-model="showClassifyList" position="right" style="width:100%;height:100%;background:#f5f5f5">
      <productClassifyEdit :classify-list="classifyList" @closeClassifyList="closeClassifyList" />
    </van-popup>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import imgBox from 'components/imgBox'
import noData from 'components/noData'
import productList from 'components/productList'
import tableList from 'components/tableList'
import productClassifyEdit from 'views/viewComponents/productClassifyEdit'
import { GetStoreProductCategoryList, GetStoreProductList, UpdateStoreProductOrderByByList } from 'api/store'
import { deskRoomList } from 'api/desk'
import utils from 'utils/utils'
export default {
  components: {
		tableList,
    draggable,
    imgBox,
    noData,
    productList,
    productClassifyEdit
  },
  data() {
    return {
			type:'', // 管理类型 
      // 初始
      title: '桌型管理',
			zhuotxt:'桌型',
      rightText: '排序',
      sortable: false,
      showClassifyList: false,
      category: '推荐',
      activeIndex: null,
      options: {
        // delay: 100,
        group: 'product',
        delayOnTouchOnly: true,
        animation: 150,
        handle: '.drag-item'
      },

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false,

      // 接口返回数据
      classifyList: [],
      primaryProductList: [],
      productList: [],

      // 请求参数
      requestData: {
        IsRecommend: 1,
        PageIndex: 1,
        PageSize: 10
      }

    }
  },
  created() {
    this.GetStoreProductCategoryList()
    this.GetStoreProductList()
  },
  mounted() {
    this.$nextTick(function() {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    // 新增商品
    addProduct() {
      if (this.sortable) {
        this.$toast.fail('当前处于排序状态，请完成排序状态再添加商品')
        return
      }
      var _params = {}
      _params.ID = 0
      if (this.activeIndex === null) {
        _params.IsRecommend = 1
      } else {
        _params.ProductCategoryId = this.classifyList[this.activeIndex].ID
      }
      this.editDetail(JSON.stringify(_params))
    },

    // 关闭分类编辑页
    closeClassifyList(val) {
      console.log(val)
      if (val) {
        this.GetStoreProductCategoryList()
      }
      this.showClassifyList = false
    },

    // 商品排序
    onClickRight() {
      const _this = this
      if (_this.sortable) {
        console.log(_this.primaryProductList)
        console.log(_this.productList)
        var params = []
        this.productList.forEach((item, index) => {
          if (item.ID !== _this.primaryProductList[index].ID) {
            const _item = {
              ID: item.ID,
              orderBy: index
            }
            params.push(_item)
          }
        })
        if (params.length > 0) {
          _this.UpdateStoreProductOrderByByList(params)
        } else {
          this.$toast('没有修改，无需保存')
          this.sortable = !this.sortable
          this.rightText = '排序'
        }
        // 需要调用上传接口
        // if (JSON.stringify(this.primaryProductList) === JSON.stringify(this.productList)) {
        //   this.$toast('没有修改，无需保存')
        //   this.sortable = !this.sortable
        //   this.rightText = '排序'
        // } else {
        //   this.UpdateStoreProductOrderBy(this.productList.length)
        // }
      } else {
        this.sortable = !this.sortable
        this.rightText = '完成'
      }
    },
 
    // 点击选择推荐
    clickRecommend() {
      if (this.sortable) {
        this.$toast.fail('当前处于排序状态，请完成再选择分类')
        return
      }
      this.activeIndex = null
      this.requestData = {}
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.requestData.IsRecommend = 1
      this.productList = []
      this.primaryProductList = []
      this.GetStoreProductList()
    },
    // 点击选择分类
    changeClassify(index) {
      if (this.sortable) {
        this.$toast.fail('当前处于排序状态，请完成再选择分类')
        return
      }
      this.activeIndex = index
      this.category = this.classifyList[index].Name
      this.requestData = {}
      this.requestData.PageIndex = 1
      this.requestData.PageSize = 10
      this.requestData.CategoryId = this.classifyList[index].ID
      this.productList = []
      this.primaryProductList = []
      this.GetStoreProductList()
    },

    // 编辑商品
    editDetail(params) {
      console.log(params)
      this.$router.push({
        path: '/orderMealAdmin/tableDetailManage/' + params
      })
    },

    // 获取门店商品分类列表
    GetStoreProductCategoryList() {
      deskRoomList().then(res => {
        if (res) {
          this.classifyList = res.Data
        }
      })
      //GetStoreProductCategoryList().then(res => {
      //  if (res) {
      //    this.classifyList = res.Data
      //  }
      //})
    },
    // 获取门店商品列表
    GetStoreProductList() {
      GetStoreProductList(this.requestData).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              var _item = tem
              if (tem.ImageUrl) {
                const ImgUrlList = this.$utils.strToArr(tem.ImageUrl)
                _item.logo = ImgUrlList[0]
              }
              this.productList.push(_item)
              this.primaryProductList.push(_item)
            })
          }
        }
      })
    },
    // // 修改商品排序
    UpdateStoreProductOrderByByList(params) {
      UpdateStoreProductOrderByByList(params).then(res => {
        if (res.Data === true) {
          this.$toast.success('完成')
          this.sortable = !this.sortable
          this.rightText = '排序'
        } else {
          this.$toast.fail(res.Msg || '失败')
        }
      })
    },
    // UpdateStoreProductOrderBy(n) {
    //   const _this = this
    //   if (n <= 0) {
    //     _this.$toast.success('完成')
    //     this.sortable = !this.sortable
    //     this.rightText = '排序'
    //     return
    //   } else {
    //     if ((n - 1) === _this.productList[(n - 1)].DisplaySequence) {
    //       return _this.UpdateStoreProductOrderBy(n - 1)
    //     } else {
    //       const _params = {}
    //       _params.ID = _this.productList[(n - 1)].ID
    //       _params.Index = n - 1
    //       UpdateStoreProductOrderBy(_params).then(res => {
    //         if (res.Data === true) {
    //           return _this.UpdateStoreProductOrderBy(n - 1)
    //         } else {
    //           _this.$toast.fail(res.Msg || '失败')
    //         }
    //       })
    //     }
    //   }
    // },
    // updata(_params) {
    //   UpdateStoreProductOrderBy(_params).then(res => {
    //     console.log(res)
    //     if (res.Data) {
    //       console.log('成功')
    //     }
    //   })
    // },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true && _this.sortable === false) {
        if (utils.getScrollHeight('scrollBox') - utils.getClientHeight('scrollBox') - utils.getScrollTop('scrollBox') <= 0) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetStoreProductList()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.scoll-y {
  overflow-y: scroll;
}
.classifyItem {
  min-width: 180px;
  max-width: 200px;
}
.activeIndex {
  background: $colorF;
  position: relative;
  &:before {
    content: '';
    height: calc(100% - 40px);
    width: 8px;
    @include bg-primary();
    position: absolute;
    top: 20px;
    left: 0;
    border-radius: 0 8px 8px 0;
  }
}
.prductItem {
  padding: 32px 22px;
  position: relative;
  z-index: 1;
  &:not(:last-child) {
    margin-bottom: 2px;
  }
}
.sortable-chosen {
  box-shadow: 0 0 20px #ccc;
  z-index: 2;
  margin: 0 4px;
}
.prductItem-detail {
  padding-bottom: 50px;
  position: relative;
  .prductItem-p-left {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .prductItem-p-right {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.upDown-box {
  position: absolute;
  bottom: 32px;
  right: 22px;
  width: 110px;
  height: 40px;
  .up {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .down {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.bottom-box{
  background: $colorF;
  height: 130px;
  padding: 0 40px;
}
</style>
